<template>
  <div class="khxx_low">
    <div class="khxx_low_1_1">
      <my-search ph="请输入字段名称" width="276"></my-search>
    </div>
    <div class="khxx_low_1_2">
      <my-button :color="true">添加字段</my-button>
    </div>

    <div class="khxx-table-base-table">
      <base-table
        :mydata="customerList"
        :mytitle="customerTitle"
        type="khxx"
      ></base-table>
      <div class="pages">
        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="100"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";

export default {
  components: {
    MyButton,
    BaseTable,
    MySearch,
  },

  data() {
    return {
      customerList: [
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
        {
          zdmc: "姓名",
          zdlx: "单行文本",
          sfbt: "是",
          cjsj: "2019/09/12 10:99",
        },
      ],
      customerTitle: [
        {
          name: "字段名称",
          prop: "zdmc",
          width: 143,
        },
        {
          name: "字段类型",
          prop: "zdlx",
          width: 207,
        },
        {
          name: "是否必填",
          prop: "sfbt",
          width: 207,
        },
        {
          name: "创建时间",
          prop: "cjsj",
          width: 207,
        },
      ],
    };
  },
};
</script>

<style>
.khxx_low {
  width: 1040px;
  height: 770px;
  background-color: #ffffff;
  padding-top: 3px;
}
.khxx_low_1_1 {
  padding-top: 20px;
  padding-left: 20px;
}
.khxx_low_1_2 {
  display: flex;
  margin: -40px 0 0 920px;
}
.khxx-table-base-table {
  margin: 20px 0 0 20px;
}
.khxx-pages {
  margin: 630px 0 0 -430px;
}
</style>